<template>
	<view class="proportion">
		<view class="progress_bar">
			<view class="progress_left":style="{width: 100 + '%'}" style="border-radius: 10px;" v-if="leftValue == 0 && rightValue == 0"> 今天还未进行操作,无操作记录 </view>
			<view class="progress_left" :style="{width: leftValuePR + 7 + '%'}" style="white-space: pre;" v-if="leftValue">留窝: {{leftValue}}</view>
			<view class="progress_right" :style="{width: rightValuePR + 7 + '%'}" v-if="rightValue">抽蛋: {{rightValue}}</view>
		</view>
		<view class="info">
			<div v-if="leftValuePR"><span class="text">留窝: </span><span class="PR">{{saveTwoSmallNum(leftValuePR)}}%</span></div>
			<div v-if="rightValue"><span class="text">抽蛋: </span><span class="PR">{{saveTwoSmallNum(rightValuePR)}}%</span></div>
			<div v-if="leftValue==0 && rightValue== 0" style="display: flex;justify-content: space-between;width: 100%;
			height: 40%;
			font-size: 28rpx;
			text-align: center;">
				<div><span class="text">留窝: </span><span class="PR">0%</span></div>
				<div><span class="text">抽蛋: </span><span class="PR">0%</span></div>
			</div>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			leftValue:{
				type: Number
			},
			rightValue:{
				type: Number
			}
		},
		data(){
			return {
				siteId: uni.getStorageSync('siteId')
			}
		},
		mounted(){
			console.log('比例组件挂载')
		},
		computed:{
			leftValuePR(){
				return this.leftValue / this.allValue * 100
			},
			rightValuePR(){
				return this.rightValue / this.allValue * 100
			},
			allValue(){
				return this.leftValue + this.rightValue
			}
		},
		methods:{
			saveTwoSmallNum(number){
				return number.toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.proportion{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 6vh;
		margin: 10rpx auto;
		justify-content: space-around;
		font-size: 26.92rpx;
		.progress_bar{
			width: 100%;
			height: 50%;
			display: flex;
			justify-content: space-around;
			color: #fff;
			.progress_left,.progress_right{
				display: flex;
				height: 100%;
				justify-content: center;
				align-items: center;
			}
			.progress_left{
				border-radius: 10px 10px 0 10px;
				background-color: #a1c4fd;
				animation: slide-in-left 0.8s ease-in forwards
			}
			.progress_right{
				border-radius:  10px 10px 10px 0;
				background-color: #c2e9fb;
				animation: slide-in-right 0.8s ease-in forwards;
			}
		}
		.info{
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 40%;
			font-size: 28rpx;
			text-align: center;
			
			.PR{
				font-size: 34.62rpx;
				font-weight: bold;
			}
		}
	}
	@keyframes slide-in-left{
	  from{
	    transform: scaleX(0);
	    transform-origin: left;
	  }
	  to{
	    transform: scaleX(1);
	    transform-origin: left;
	  }
	}
	@keyframes slide-in-right{
	  from{
	    transform: scaleX(0);
	    transform-origin: right;
	  }
	  to{
	    transform: scaleX(1);
	    transform-origin: right;
	  }
	}
</style>